<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>ToDoList</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="shortcut icon" href="./build/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./build/css/style.min.css">
</head>

<body>
    <!--导航条-->
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="javascript:void(0);">
                    <img src="./build/img/公众号LOGO.min." alt="" class="img-circle ration">
                    <span class="text-primary">ToDoList</span>
                </a>
            </div>
        </div>
    </nav>

    <!-- 菜单栏 -->
    <div class="san"></div>
    <nav class="left">
        <ul class="list-group" id="my-list">
            <a href="./index.html" class="list-group-item list-group-item-info"><span class="glyphicon glyphicon-home">&nbsp;ToDoList</span></a>
            <a href="https://www.moxuan.xyz" class="list-group-item list-group-item-info" target="_blank"><span class="glyphicon glyphicon-edit">&nbsp;墨轩技术糖</span></a>
            <a href="https://www.moxuan.xyz/about/" class="list-group-item list-group-item-info" target="_blank"><span class="glyphicon glyphicon-user">&nbsp;关于我</span></a>
        </ul>
    </nav>

    <!-- 幕布 -->
    <div class="mask"></div>

    <!--面板-->
    <div id="app">
        <div class="container">
            <template>
                <div class="row row-same-height">
                    <div class="col-md-8 col-md-offset-2">
                        <h3 class="text-danger">亲～ ^_^ 您现在还有 {{count}} 件事情未完成哦～</h3>
                        <!-- 输入框及添加按钮 -->
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="您有什么事情没有做吗？" v-model="title"
                                @keyup.enter="add">
                            <span class="input-group-btn">
                                <button class="btn btn-success" type="button" @click="add">添加</button>
                            </span>
                        </div>
                        <div class="alert alert-danger clear" v-show="flag" role="alert">你没有添加任务哦～</div>

                        <!-- 面板title -->
                        <div class="panel panel-success">
                            <div class="panel-heading">
                                <h3 class="panel-title">&nbsp;待办事项</h3>
                            </div>
                            <!-- 面板body -->
                            <div class="panel-body">
                                <!-- 列表 -->
                                <ul class="list-group">
                                    <li class="list-group-item" v-for="(title, index) in filterHash"
                                        @dblclick="remember(title)">
                                        <!-- 如果isSelected为true，则del生效  -->
                                        <span :class="{del:title.isSelected}" v-show="cur!=title">
                                            <input type="checkbox" v-model="title.isSelected"> &nbsp;{{title.content}}
                                        </span>
                                        <!-- 双击时显示，用于修改内容 -->
                                        <!-- v-focus为自定义指令 -->
                                        <input type="text" v-show="cur==title" v-model="title.content"
                                            @keyup.enter="cancel" @blur="cancel" v-focus="cur==title">

                                        <button type="button" class="btn btn-danger btn-xs pull-right"
                                            >
                                            <span class="glyphicon glyphicon-trash" aria-hidden="true" @click="remove(title)"></span>
                                        </button>

                                    </li>
                                </ul>
                                <ul class="nav nav-pills">
                                    <li role="presentation" :class="{active:this.hash=='all'}"><a href="#/all">全部事项</a>
                                    </li>
                                    <li role="presentation" :class="{active:this.hash=='finish'}"><a
                                            href="#/finish">已完成</a></li>
                                    <li role="presentation" :class="{active:this.hash=='unfinish'}"><a
                                            href="#/unfinish">未完成</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>

    <!-- 页脚 -->
    <footer>
        <div class="copy">
           <i class="glyphicon glyphicon-copyright-mark">2019</i>
           <span>&nbsp;by<a href="https://www.moxuan.xyz" target="_blank"> 墨轩啊</a></span>
        </div>
        <div class="info">
            <a href="moxuan-jst@foxmail.com" target="_blank"><i class="iconfont">&#xe7f9;</i><span>&nbsp;E-Mail:moxuan-jst@foxmail.com</span></a>
            <a href="https://github.com/moxuan-jst" target="_blank"><i class="iconfont">&#xe600;<span>&nbsp;moxuan-jst</span></i></a>
            <a href="https://weibo.com/u/2690290777" target="_blank"><i class="iconfont">&#xe65e;</i><span>&nbsp;墨轩啊</span></a>
        </div>
    </footer>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <!-- 加载vue -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

    <script src="./build/js/index.min.js"></script>
    <script src="./build/js/caidan.min.js"></script>

</body>

</html>
<!--
    1、将数据循环到页面上
    2、敲回车时添加新数据（需要加入isSelected属性）
    3、删除功能
    4、计算当前没有被选中的个数
    5、双击时可修改内容
    6、头像可旋转
    7、下拉菜单
-->